<%--
  Created by IntelliJ IDEA.
  User: yxl
  Date: 2014/10/10
  Time: 14:30
--%>

<div class="row wid_1000 blk2 mTo_50" style="min-height: 630px;">
    <div class="loginqu1"> 注册 </div>
    <div class="col-xs-12">
        <g:form id="form" useToken="true" url="${url}" class="form-horizontal" role="form">
            <div class="form-group  message %{--alert--}%  col-xs-12"> </div>
            <div class="form-group form-field field-username">
                <label class="col-sm-3 control-label no-padding-right f_l" for="form-username"> 用&nbsp;&nbsp;户&nbsp;&nbsp;名: </label>
                <div class=" col-sm-4 zc_Rtxt f_l">
                    <g:textField  name="username" id="form-username" placeholder="请输入用户名" class="width-100" />
                </div>
                <div class="help-block col-xs-12 col-sm-reset inline fieldMsg">  </div>
            </div>
            <div class="form-group form-field field-password">
                <label class="col-sm-3 control-label no-padding-right f_l" for="form-password"> 密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码: </label>
                <div class=" col-sm-4 zc_Rtxt f_l">
                    <g:passwordField  name="password" id="form-password" placeholder="请输入密码" class="width-100" />
                </div>
                <div class="help-block col-xs-12 col-sm-reset inline fieldMsg">  </div>
            </div>
            <div class="form-group form-field field-passwordConfirm">
                <label class="col-sm-3 control-label no-padding-right f_l" for="form-passwordConfirm"> 确认密码: </label>
                <div class=" col-sm-4 zc_Rtxt">
                    <g:passwordField  name="passwordConfirm" id="form-passwordConfirm" placeholder="请再次输入密码" class="width-100" />
                </div>
                <div class="help-block col-xs-12 col-sm-reset inline fieldMsg">  </div>
            </div>
            <div class="form-group form-field field-email">
                <label class="col-sm-3 control-label no-padding-right f_l" for="form-email"> 邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱: </label>
                <div class=" col-sm-4 zc_Rtxt">
                    <g:textField  name="email" id="form-email" placeholder="请输入邮箱地址" class="width-100" />
                </div>
                <div class="help-block col-xs-12 col-sm-reset inline fieldMsg">  </div>
            </div>
            <div class="form-group form-field field-cellPhone">
                <label class="col-sm-3 control-label no-padding-right f_l" for="form-cellPhone">手机号码: </label>
                <div class=" col-sm-4 zc_Rtxt f_l">
                    <g:textField  name="cellPhone" id="form-cellPhone" placeholder="请输入手机号码" class="width-100" />
            </div>
            <div class="help-block col-xs-12 col-sm-reset inline fieldMsg">  </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right f_l" for="form-validateCode">验&nbsp;&nbsp;证&nbsp;&nbsp;码: </label>
                <div class=" col-sm-4 zc_Rtxt f_l">
                    <g:textField  name="validateCode" id="form-validateCode" placeholder="请输入验证码" class="width-60" />
                    <input class="btn annui1 %{--btn-info--}%" id="btn" type="button" value="获取验证码" onclick="getValidateCode()" />
                </div>
                <div id="validateCodeShow">

                </div>
            </div>

            <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                    <button class="btn annui1" type="submit">
                        <i class="icon-ok bigger-110"></i>
                        立即注册
                    </button>
                </div>
            </div>
        </g:form>
    </div>
    <div class="ying"></div>
</div>

<r:require module="mng_form"></r:require>
<r:script>
        (function($) {
            $(".selectPicker").selectPicker({
                width: 700, height: 500
            });
            $(".chosen-select").chosen();
            $('#form').ajaxForm({
                beforeSubmit: function() {
                    $("#form").jqFormClearErr();
                    $("#form").find("input[type=submit]").attr("disabled", true);
                },
                success: function(response) {

                    var userId = response.userId;
                    $("#form").find("input[type=submit]").attr("disabled", false);
                    if(response.error == 1) {
                        alert(response.message);
                        return
                    }
                    $("#form").jqFormResponse({
                        response: response,
                        successUri: "<g:createLink action='success'/>"+"?userId=" + userId
                    });

                },
                error: function() {
                    $("#form").find("input[type=submit]").attr("disabled", false);
                }
            });
        }(jQuery));

        var wait = 30;
        function time() {
            if (wait == 0) {
                $("#btn").removeAttr("disabled");
                $("#btn").val("重新获取");
                wait = 30;
            } else {
                $("#btn").attr("disabled", true)
                $("#btn").val("重新获取(" + wait + ")");
                wait--;
                setTimeout(function() {
                            time();
                        },
                        1000)
            }
        }

        function getValidateCode(){
            var cellPhone = $("#form-cellPhone").val();
            jQuery.ajax({
                type:'POST',
                data:'cellPhone=' + cellPhone,
                url:'/photobox/member/getValidateCode',
                success:function(data,textStatus){
                        console.log(data);
                        jQuery('#validateCodeShow').text(data.message);
                        if (data.status == 1) {
                            time();
                        }
                },
                error:function(XMLHttpRequest,textStatus,errorThrown){
                }
            });
        }
</r:script>

